<!-- Bread crumb is created dynamically -->
<!-- row -->
<div class="row">

    <!-- col -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h1 class="page-title txt-color-blueDark">
            <!-- PAGE HEADER --><i class="fa-fw fa fa-pencil-square-o"></i> Forms <span>
                >
                Image Editor
            </span>
        </h1>
    </div>
    <!-- end col -->

</div>
<!-- end row -->

<!--
The ID "widget-grid" will start to initialize all widgets below
You do not need to use widgets if you dont want to. Simply remove
the <section></section> and you can use wells or panels instead
-->

<!-- widget grid -->
<section id="widget-grid" class="">

<!-- row -->
<div class="row">

<!-- NEW WIDGET START -->
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

<div class="alert alert-danger hidden-lg hidden-md hidden-sm">
    <b>Please note:</b>
    This plugin is non-responsive
</div>

<!-- Widget ID (each widget will need unique ID)-->

<div class="jarviswidget jarviswidget-sortable" id="wid-id-0" data-widget-togglebutton="false" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false" role="widget" style="">
<!-- widget options:
usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

data-widget-colorbutton="false"
data-widget-editbutton="false"
data-widget-togglebutton="false"
data-widget-deletebutton="false"
data-widget-fullscreenbutton="false"
data-widget-custombutton="false"
data-widget-collapsed="true"
data-widget-sortable="false"

-->
<header role="heading">
    <span class="widget-icon">
        <i class="fa fa-file-image-o txt-color-darken"></i>
    </span>
    <h2 class="hidden-xs hidden-sm">jcrop </h2>

    <ul class="nav nav-tabs pull-right in" id="myTab">

        <li class="active">
            <a data-toggle="tab" href="#s1">
                <i class="fa fa-crop text-success"></i> <span class="hidden-mobile hidden-tablet">API</span>
            </a>
        </li>

        <li>
            <a data-toggle="tab" href="#s2">
                <i class="fa fa-crop text-primary"></i> <span class="hidden-mobile hidden-tablet">Default</span>
            </a>
        </li>

        <li>
            <a data-toggle="tab" href="#s3">
                <i class="fa fa-crop text-warning"></i> <span class="hidden-mobile hidden-tablet">Basic</span>
            </a>
        </li>

        <li>
            <a data-toggle="tab" href="#s4">
                <i class="fa fa-crop text-danger"></i> <span class="hidden-mobile hidden-tablet">Aspect Ratio</span>
            </a>
        </li>

        <li>
            <a data-toggle="tab" href="#s5">
                <i class="fa fa-crop txt-color-purple"></i> <span class="hidden-mobile hidden-tablet">Animations</span>
            </a>
        </li>

        <li>
            <a data-toggle="tab" href="#s6">
                <i class="fa fa-crop txt-color-pink"></i> <span class="hidden-mobile hidden-tablet">Styling</span>
            </a>
        </li>

    </ul>

    <span class="jarviswidget-loader">
        <i class="fa fa-refresh fa-spin"></i>
    </span>
</header>

<!-- widget div-->
<div role="content">
<!-- widget edit box -->

<div class="widget-body">
<!-- content -->
<div id="myTabContent" class="tab-content">

<!-- new tab: API interface -->
<div class="tab-pane fade clearfix active in" id="s1">

    <h4 class="margin-bottom-10">API Interface — real-time API example</h4>

    <div class="alert alert-info">
        <b>Experimental shader active.</b>
        Jcrop now includes a shading mode that facilitates building
        better transparent Jcrop instances. The experimental shader is less
        robust than Jcrop's default shading method and should only be
        used if you require this functionality.
        <br>
        View jcrop's documentation by going to: <a href="http://deepliquid.com/content/Jcrop.html" target="_blank">http://deepliquid.com/content/Jcrop.html</a>
    </div>

    <style type="text/css">
        .optdual { position: relative; }

        .optdual .offset {
            left: 18em;
            position: absolute;
        }

        .optlist label {
            display: block;
            width: 16em;
        }

        #dl_links { margin-top: .5em; }
						
    </style>

    <img src="~/img/superbox/superbox-full-7.jpg" id="target-5" alt="[Jcrop Example]" class="pull-left"/>

    <div class="pull-left padding-gutter padding-top-0 padding-bottom-0 jcrop-api-tabs-options">

        <fieldset>

            <legend>
                Option Toggles
            </legend>

            <span class="requiresjcrop">
                <button id="setSelect" class="btn btn-default btn-sm">
                    setSelect
                </button>
                <button id="animateTo" class="btn btn-default btn-sm">
                    animateTo
                </button>
                <button id="release" class="btn btn-default btn-sm">
                    Release
                </button>
                <button id="disable" class="btn btn-default btn-sm">
                    Disable
                </button>
            </span>
            <button id="enable" class="btn btn-default btn-sm" style="display: none;">
                Re-Enable
            </button>
            <button id="unhook" class="btn btn-default btn-sm">
                Destroy!
            </button>
            <button id="rehook" class="btn btn-default btn-sm" style="display: none;">
                Attach Jcrop
            </button>
        </fieldset>

        <fieldset class="optdual requiresjcrop">
            <legend>
                Option Toggles
            </legend>
            <div class="optlist offset">
                <label class="margin-top-0">
                    <input type="checkbox" class="checkbox style-0" id="ar_lock">
                    <span>Aspect ratio</span>
                </label>

                <label class="">
                    <input type="checkbox" class="checkbox style-0" id="size_lock">
                    <span>minSize/maxSize setting</span>
                </label>
            </div>
            <div class="optlist">
                <label class=" margin-top-0">
                    <input type="checkbox" class="checkbox style-0" id="can_click">
                    <span>Allow new selections</span>
                </label>

                <label class="">
                    <input type="checkbox" class="checkbox style-0" id="can_move">
                    <span>Selection can be moved</span>
                </label>

                <label class="">
                    <input type="checkbox" class="checkbox style-0" id="can_size">
                    <span>Resizable selection</span>
                </label>

            </div>
        </fieldset>

        <fieldset class="requiresjcrop changeImages">
            <legend>
                Change Image
            </legend>
            <div class="btn-group">
                <button class="btn btn-default" id="~/img2">
                    Lego
                </button>
                <button class="btn btn-default active" id="~/img1">
                    Breakdance
                </button>
                <button class="btn btn-default" id="~/img3">
                    Dragon Fly
                </button>
            </div>
        </fieldset>

    </div>

</div>
<!-- end s1 tab pane -->

<!-- new tab: Default -->
<div class="tab-pane clearfix fade" id="s2">

    <h4 class="margin-bottom-10">Default Behaviour</h4>

    <div class="alert alert-info">
        <b>This example demonstrates the default behavior of Jcrop.</b>
        <br/>
        Since no event handlers have been attached it only performs
        the cropping behavior.
    </div>

    <img src="~/img/superbox/superbox-full-11.jpg" id="target" alt="[Jcrop Example]"/>

</div>
<!-- end s1 tab pane -->

<!-- new tab: Basic handler -->
<div class="tab-pane clearfix fade" id="s3">

    <h4 class="margin-bottom-10">Basic Handler — basic form integration</h4>

    <div class="alert alert-info">
        <b>An example with a basic event handler.</b> Here we've tied
        several form values together with a simple event handler invocation.
        The result is that the form values are updated in real-time as
        the selection is changed using Jcrop's <em>onChange</em> handler.
    </div>

    <!-- This is the image we're attaching Jcrop to -->
    <img src="~/img/superbox/superbox-full-10.jpg" id="target-2" alt="[Jcrop Example]"/>

    <!-- This is the form that our event handler fills -->
    <form id="coords"
          class="coords margin-top-10"
          onsubmit="return false;"
          action="">

        <div class="inline-labels">
            <label>
                X1
                <input type="text" size="4" id="x1" name="x1"/>
            </label>
            <label>
                Y1
                <input type="text" size="4" id="y1" name="y1"/>
            </label>
            <label>
                X2
                <input type="text" size="4" id="x2" name="x2"/>
            </label>
            <label>
                Y2
                <input type="text" size="4" id="y2" name="y2"/>
            </label>
            <label>
                W
                <input type="text" size="4" id="w" name="w"/>
            </label>
            <label>
                H
                <input type="text" size="4" id="h" name="h"/>
            </label>
        </div>
    </form>

</div>
<!-- end s2 tab pane -->

<!-- new tab: Aspect ratio -->
<div class="tab-pane clearfix fade" id="s4">

    <style type="text/css">
									/* Apply these styles only when #preview-pane has
									 been placed within the Jcrop widget */
        .jcrop-holder #preview-pane {
            -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
            background-color: white;
            border: 1px rgba(0, 0, 0, .4) solid;
            box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
            display: block;
            padding: 3px;
            position: absolute;
            right: -280px;
            z-index: 200;
        }

        /* The Javascript code will set the aspect ratio of the crop
									 area based on the size of the thumbnail preview,
									 specified here */

        #preview-pane .preview-container {
            height: 170px;
            overflow: hidden;
            width: 250px;
        }

    </style>

    <h4 class="margin-bottom-10">Aspect Ratio w/ Preview Pane — nice visual example</h4>

    <div class="alert alert-info">
        <b>An example implementing a preview pane.</b>
        Obviously the most visual demo, the preview pane is accomplished
        entirely outside of Jcrop with a simple jQuery-flavored callback.
        This type of interface could be useful for creating a thumbnail
        or avatar. The onChange event handler is used to update the
        view in the preview pane.
    </div>

    <img src="~/img/superbox/superbox-full-9.jpg" id="target-3" alt="[Jcrop Example]"/>

</div>
<!-- end s3 tab pane -->

<!-- new tab: animation/transitions -->
<div class="tab-pane clearfix fade" id="s5">

    <h4 class="margin-bottom-10">Animation/Transitions — animation/fading demo</h4>

    <div class="alert alert-info">
        <b>Experimental shader active.</b>
        Jcrop now includes a shading mode that facilitates building
        better transparent Jcrop instances. The experimental shader is less
        robust than Jcrop's default shading method and should only be
        used if you require this functionality.
    </div>

    <div class="row">

        <div class="col-sm-12 col-md-12 col-lg-12">

            <img src="~/img/superbox/superbox-full-7.jpg" id="target-4" alt="Jcrop Image" class="pull-left"/>


            <div id="interface" class="pull-left padding-gutter padding-top-0 padding-bottom-0">
                <br>
                <label class="">
                    <input type="checkbox" class="checkbox style-0" id="fadetog">
                    <span>Enable fading (bgFade: true)</span>
                </label>
                <br>
                <label class="">
                    <input type="checkbox" class="checkbox style-0" id="shadetog">
                    <span>Use experimental shader (shade: true)</span>
                </label>

            </div>
        </div>

    </div>

</div>
<!-- end s4 tab pane -->

<!-- new tab: Styling -->
<div class="tab-pane fade clearfix padding-10 no-padding-bottom" id="s6">

    <h4 class="margin-bottom-10">Styling Example — style Jcrop dynamically with CSS</h4>

    <img src="~/img/superbox/superbox-full-16.jpg" id="target-6" alt="[Jcrop Example]"/>

    <div class="pull-left pull-left padding-gutter padding-top-0 padding-bottom-0">
        <fieldset>
            <legend>
                Manipulate classes
            </legend>
            <div class="btn-group" id="buttonbar">
                <button class="btn btn-default active" data-setclass="jcrop-light" id="radio1">
                    jcrop-light
                </button>
                <button class="btn btn-default" data-setclass="jcrop-dark" id="radio2">
                    jcrop-dark
                </button>
                <button class="btn btn-default" data-setclass="jcrop-normal" id="radio3">
                    normal
                </button>
            </div>
        </fieldset>
    </div>

</div>
<!-- end s6 tab pane -->

</div>

<!-- end content -->
</div>

</div>
<!-- end widget div -->
</div>
<!-- end widget -->

</article>
<!-- WIDGET END -->

</div>

<!-- end row -->

</section>
<!-- end widget grid -->
@section Scripts {
    <script type="text/javascript">
        /* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

        pageSetUp();

        /*
         * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
         * eg alert("my home function");
         *
         * var pagefunction = function() {
         *   ...
         * }
         * loadScript("/js/plugin/_PLUGIN_NAME_.js", pagefunction);
         *
         * TO LOAD A SCRIPT:
         * var pagefunction = function (){
         *  loadScript(".../plugin.js", run_after_loaded);
         * }
         *
         * OR
         *
         * loadScript(".../plugin.js", run_after_loaded);
         */

        var jcrop_api, api, thumbnail, cb;


        var pagefunction = function() {
            //console.log("load and ready");


            var default_handler = function() {
                $('#target').Jcrop();
            };

            var basic_handler = function() {

                $('#target-2').Jcrop({
                        onChange: showCoords,
                        onSelect: showCoords,
                        setSelect: [48, 34, 391, 302, 343, 268]
                    },
                    function() {
                        jcrop_api = this;
                    });

                $('#coords').on('change',
                    'input',
                    function(e) {
                        var x1 = $('#x1').val(), x2 = $('#x2').val(), y1 = $('#y1').val(), y2 = $('#y2').val();
                        jcrop_api.setSelect([x1, y1, x2, y2]);
                    });

                // Simple event handler, called from onChange and onSelect
                // event handlers, as per the Jcrop invocation above
                function showCoords(c) {
                    $('#x1').val(c.x);
                    $('#y1').val(c.y);
                    $('#x2').val(c.x2);
                    $('#y2').val(c.y2);
                    $('#w').val(c.w);
                    $('#h').val(c.h);
                };

                function clearCoords() {
                    $('#coords input').val('');
                };

            };

            // aspect ratio

            var aspect_ratio = function() {

                // Instantiate Jcrop
                $('#target-3').Jcrop({
                        aspectRatio: 3 / 2,
                        setSelect: [0, 50, 250, 170]
                    },
                    function() {
                        var jcrop_api = this;
                        thumbnail = this.initComponent('Thumbnailer', { width: 250, height: 170 });
                        this.ui.preview = thumbnail;
                    });
            };
            // end aspect_ratio

            var animation_handler = function() {

                $('#target-4').Jcrop({
                        bgFade: true,
                        bgOpacity: .8,
                        setSelect: [60, 70, 540, 330]
                    },
                    function() {
                        jcrop_api = this;
                    });

                $('#fadetog').change(function() {
                    jcrop_api.setOptions({
                        bgFade: this.checked
                    });
                }).attr('checked', 'checked');

                $('#shadetog').change(function() {
                    if (this.checked)
                        $('#shadetxt').slideDown();
                    else
                        $('#shadetxt').slideUp();
                    jcrop_api.setOptions({
                        shade: this.checked
                    });
                }).attr('checked', false);

                // Define page sections
                var sections = {
                    bgc_buttons: 'Change bgColor',
                    bgo_buttons: 'Change bgOpacity',
                    anim_buttons: 'Animate Selection'
                };
                // Define animation buttons
                var ac = {
                    anim1: [50, 50, 300, 300],
                    anim2: [20, 20, 560, 360],
                    anim3: [70, 70, 256, 276],
                    anim4: [150, 100, 200, 200],
                    anim5: [136, 55, 372, 183]
                };
                // Define bgOpacity buttons
                var bgo = {
                    Low: .8,
                    Mid: .5,
                    High: .2,
                    Full: 0
                };
                // Define bgColor buttons
                var bgc = {
                    R: '#900',
                    B: '#4BB6F0',
                    Y: '#F0B207',
                    G: '#46B81C',
                    W: 'white',
                    K: 'black'
                };
                // Create fieldset targets for buttons
                for (i in sections) insertSection(i, sections[i]);

                function create_btn(c) {
                    var $o = $('<button />').addClass('btn btn-default btn-small');
                    if (c)
                        $o.append(c);
                    return $o;
                }

                var a_count = 1;
                // Create animation buttons
                for (i in ac) {
                    $('#anim_buttons .btn-group').append(create_btn(a_count++).click(animHandler(ac[i])), ' ');
                }

                $('#anim_buttons .btn-group').append(create_btn('Bye!').click(function(e) {
                    $(e.target).addClass('active');
                    $(e.target).closest('.btn-group').find('.active').removeClass('active');
                    jcrop_api.animateTo([300, 200, 300, 200]);
                    return false;
                }));

                // Create bgOpacity buttons
                for (i in bgo) {
                    $('#bgo_buttons .btn-group').append(create_btn(i).click(setoptHandler('bgOpacity', bgo[i])), ' ');
                }
                // Create bgColor buttons
                for (i in bgc) {
                    $('#bgc_buttons .btn-group').append(create_btn(i).css({
                            background: bgc[i],
                            color: ((i == 'K') || (i == 'R')) ? 'white' : 'black'
                        }).click(setoptHandler('bgColor', bgc[i])),
                        ' ');
                }

                // Function to insert named sections into interface
                function insertSection(k, v) {
                    $('#interface').prepend($('<fieldset></fieldset>').attr('id', k)
                        .append($('<legend></legend>').append(v),
                            '<div class="btn-toolbar"><div class="btn-group"></div></div>'));
                };

                // Handler for option-setting buttons
                function setoptHandler(k, v) {
                    return function(e) {
                        $(e.target).closest('.btn-group').find('.active').removeClass('active');
                        $(e.target).addClass('active');
                        var opt = {};
                        opt[k] = v;
                        jcrop_api.setOptions(opt);
                        return false;
                    };
                };

                // Handler for animation buttons
                function animHandler(v) {
                    return function(e) {
                        $(e.target).addClass('active');
                        $(e.target).closest('.btn-group').find('.active').removeClass('active');
                        jcrop_api.animateTo(v);
                        return false;
                    };
                };

                $('#bgo_buttons .btn:first,#bgc_buttons .btn:last').addClass('active');
                $('#interface').show();

            };
            // end animation_handler

            // styling_handler
            var styling_handler = function() {

                $('#target-6').Jcrop({
                        // start off with jcrop-light class
                        bgOpacity: 0.5,
                        bgColor: 'white',
                        addClass: 'jcrop-light'
                    },
                    function() {
                        api = this;
                        api.setSelect([130, 65, 130 + 350, 65 + 285]);
                        api.setOptions({
                            bgFade: true
                        });

                    });
                $('#buttonbar').on('click',
                    'button',
                    function(e) {
                        var $t = $(this), $g = $t.closest('.btn-group');
                        $g.find('button.active').removeClass('active');
                        $t.addClass('active');
                        $g.find('[data-setclass]').each(function() {
                            var $th = $(this), c = $th.data('setclass'), a = $th.hasClass('active');
                            if (a) {
                                switch (c) {
                                case 'jcrop-light':
                                    api.setOptions({
                                        bgColor: 'white',
                                        bgOpacity: 0.5
                                    });
                                    break;

                                case 'jcrop-dark':
                                    api.setOptions({
                                        bgColor: 'black',
                                        bgOpacity: 0.8
                                    });
                                    break;

                                case 'jcrop-normal':
                                    api.setOptions({
                                        bgColor: $.Jcrop.defaults.bgColor,
                                        bgOpacity: $.Jcrop.defaults.bgOpacity
                                    });
                                    break;
                                }
                            }

                        });
                    });

            };

            function random_coords() {
                return [
                    Math.random() * 300,
                    Math.random() * 200,
                    (Math.random() * 400),
                    (Math.random() * 300)
                ];
            }

            var api_handler = function() {
                // The variable jcrop_api will hold a reference to the
                // Jcrop API once Jcrop is instantiated.

                $('#target-5').Jcrop({
                    },
                    function() {
                        interface_load(this);
                    });

                function interface_load(obj) {
                    cb = obj;
                    cb.newSelection();
                    cb.setSelect(random_coords());

                    function run_cleanup() {
                        var m = cb.ui.multi, s = cb.ui.selection;

                        for (var i = 0; i < m.length; i++)
                            if (s !== m[i]) m[i].remove();

                        cb.ui.multi = [s];
                        s.center();
                        s.focus();
                    }

                    $('.jcrop-api-tabs-options').on('click',
                        'button',
                        function() {
                            id = $(this).attr('id');
                            switch (id) {
                            case 'setSelect':
                                cb.setSelect(random_coords());
                                break;
                            case 'animateTo':
                                cb.animateTo(random_coords());
                                break;
                            case 'release':
                                cb.setOptions({ setSelect: null });
                                run_cleanup();
                                break;
                            case 'disable':
                                cb.setOptions(allOptions(false));
                                $('#enable').show();
                                $('.requiresjcrop').hide();
                                break;
                            case 'enable':
                                cb.setOptions(allOptions(true));
                                console.log(allOptions(true));
                                $('#enable').hide();
                                $('.requiresjcrop').show();
                                break;
                            case 'unhook':
                                cb.destroy();
                                $('#unhook,.requiresjcrop,#enable').hide();
                                $('#rehook').show();
                                break;
                            case 'rehook':
                                api_handler();
                                $('#rehook').hide();
                                $('#unhook,.requiresjcrop').show();
                                break;
                            }
                        });

                    function allOptions(boolean) {
                        var array = {
                            canResize: boolean,
                            allowSelect: boolean,
                            canDrag: boolean,
                            canResize: boolean
                        };
                        return array;
                    };

                    function checked(element) {
                        return document.getElementById(element).checked;
                    }

                    $('.optlist').on('change',
                        'input[type="checkbox"]',
                        function() {
                            id = $(this).attr('id');
                            switch (id) {
                            case 'can_click':
                                cb.setOptions({
                                    allowSelect: checked(id) ? true : false
                                });
                                break;
                            case 'ar_lock':
                                cb.setOptions({
                                    aspectRatio: checked(id) ? 5 / 3 : false
                                });
                                break;
                            case 'can_move':
                                cb.setOptions({
                                    canDrag: checked(id) ? true : false
                                });
                                break;
                            case 'can_size':
                                cb.setOptions({
                                    canResize: checked(id) ? true : false
                                });
                                break;
                            case 'size_lock':
                                cb.setOptions({
                                    minSize: checked(id) ? [100, 100] : [50, 50],
                                    maxSize: checked(id) ? [400, 350] : [0, 0]
                                });
                                break;


                            }

                        });

                    function checkActive(element, cl) {
                        if ($(element).hasClass(cl)) {
                            return true;
                        } else {
                            $(element).parent().children().removeClass(cl);
                            $(element).addClass(cl);
                            return true;
                        }
                    }

                    $('.changeImages').on('click',
                        'button',
                        function() {
                            var id = $(this).attr('id');
                            checkActive(this, 'active');
                            switch (id) {
                            case 'img1':
                                cb.setImage('img/superbox/superbox-full-7.jpg',
                                    function() {
                                        cb.destroy();
                                        api_handler();
                                    });
                                break;
                            case 'img2':
                                cb.setImage('img/superbox/superbox-full-24.jpg',
                                    function() {
                                        cb.destroy();
                                        api_handler();
                                    });
                                break;
                            case 'img3':
                                cb.setImage('img/superbox/superbox-full-20.jpg');
                                cb.destroy();
                                api_handler();
                                break;
                            }
                        });

                }
            };
            $('#can_click, #can_move, #can_size').attr('checked', 'checked');
            basic_handler();
            default_handler();
            api_handler();
            styling_handler();
            animation_handler();
            aspect_ratio();

        };

        // destroy generated instances 
        // pagedestroy is called automatically before loading a new page
        // only usable in AJAX version!

        var pagedestroy = function() {

            /*
            Example below:
    
            $("#calednar").fullCalendar( 'destroy' );
            if (debugState){
                root.console.log("✔ Calendar destroyed");
            } 
    
            For common instances, such as Jarviswidgets, Google maps, and Datatables, are automatically destroyed through the app.js loadURL mechanic
    
            */
            $('#coords').off();
            $('#buttonbar').off();

            jcrop_api.destroy();
            api.destroy();
            cb.destroy();

            if (debugState) {
                root.console.log("✔ Jcrop destroyed");
            }
        };

        // end destroy

        // load dependency and run pagefunction
        loadScript("/js/plugin/jcrop/jquery.Jcrop.min.js",
            function() {
                loadScript("/js/plugin/jcrop/jquery.color.min.js", pagefunction);
            });

    </script>
}
